/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
//1.1 获取频道列表数据
async function setChannleList() {
    const res = await axios({
        //基地址＋url
        url: `/v1_0/channels`
    })
    //console.log(res);
    const resStr = res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
    document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + resStr
}
//默认网页运行后就马上调用
setChannleList()


/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormDa/v1_0/channelsta
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
//获取表单元素监听事件
document.querySelector('.img-file').addEventListener('change', async e => {
    const file = e.target.files[0]
    const fd = new FormData()
    fd.append('image', file)
    //2.3 单独上传图片并得到图片 URL 网址
    const res = await axios({
        url: '/v1_0/upload',
        method: 'POST',
        data: fd
    })
    //console.log(res); //res.data.url
    //2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
    const imgUrl = res.data.url
    document.querySelector('.rounded').src = imgUrl
    //初始时图片隐藏，加号显示，上传图片后图片显示，加号隐藏
    document.querySelector('.rounded').style.display = 'inline-block'
    document.querySelector('.place').style.display = 'none'
})
//优化：点击img 可以重新切换封面
//思路 绑定img点击事件 ==》 用JS方式触发文件选择元素的click事件方法
document.querySelector('.rounded').addEventListener('click', () => {
    document.querySelector('.img-file').click()
})

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
//3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {
    //判断是点击发布还是保存，如果不是发布那就不执行下面的代码
    if(e.target.innerHTML !== '发布') return
     
    const form = document.querySelector('.art-form')
    const data = serialize(form, { hash: true, empty: true })

    //发布文章的时候，不需要id属性，所以可以删除掉（id为了后续做编辑使用）
    delete data.id
    console.log(data);
    //封面图片不在表单中，所以需要自己收集封面图片地址并保存到data对象中
    data.cover = {
        type: 1, //封面类型
        images: [document.querySelector('.rounded').src] //封面图片的url网址
    }
    //console.log(data);
    //3.2 基于 axios 提交到服务器保存
    //try{}catch返回失败结果
    try {
        const res = await axios({
            url: '/v1_0/mp/articles',
            method: 'POST',
            data: data
        })
        //console.log(res);
        //调用弹窗
        myAlert(true, "发布成功")
        //3.4 重置表单并跳转到列表页
        form.reset()//只能清空表单中的表单元素
        //封面和编辑框需要手动重置
        document.querySelector('.rounded').src = ''
        //上传图片后图片显示，加号隐藏，重置后图片隐藏，加号显示
        document.querySelector('.rounded').style.display = 'none'
        document.querySelector('.place').style.display = 'inline-block'
        //使用编辑器插件中的setHtml('')方法来清空
        editor.setHtml('')

        setTimeout(() => {
            //跳转
            location.href = '../content/index.html'
        }, 2000);

    } catch (error) {
        myAlert(false, error.response.data.message)
    }

})

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
//4.2 发布文章页面接收content传过来的参数判断（共用同一套表单）
;(function(){
    console.log(location.search);//?id=18cdfd12-ce6b-47b5-bb3a-6e3c9f1d43cb
    const paramsStr = location.search
    
    //把查询参数格式化成查询参数对象（URLSearchParams：快速构造和获取URL查询参数的方法）

    const params = new URLSearchParams(paramsStr)
    console.log(params);
    //遍历参数的每个值
    params.forEach(async (value, key) => {
        //当前有要编辑的文章id被传入了
        if(key === 'id'){
            //4.3 修改标题和按钮文字
            document.querySelector('.title span').innerHTML = '修改文章'
            document.querySelector('.send').innerHTML = '修改'
            //4.4 获取文章详情数据并回显表单
            const res = await axios({
                url:`/v1_0/mp/articles/${value}`
            })
            console.log(res);
            //组织仅仅需要的数据对象，为后续遍历回显到页面上做铺垫
            const dataObj = {
                channel_id : res.data.channel_id,
                title:res.data.title,
                rounded:res.data.cover.images[0], //封面图片地址
                content:res.data.content,
                id:res.data.id
            }
            //遍历数据对象的属性。然后映射到 页面元素上，快速赋值
            Object.keys(dataObj).forEach(key => {
                //key的值等于rounded进入设置封面
                if(key === 'rounded'){
                    //封面设置
                    if(dataObj[key]){
                        //有封面
                        document.querySelector('.rounded').src = dataObj[key]
                        document.querySelector('.rounded').classList.add('show')
                        document.querySelector('.place').classList.add('hide')
                    }
                }else if(key === 'content') {//key === 'content'进入设置内容
                    //富文本内容
                    editor.setHtml(dataObj[key])
                }else{ //上下的设置表单元素 ，表单元素的name属性跟数据的属性名一致
                    //用数据属性名作为标签的
                    document.querySelector(`[name = ${key}`).value = dataObj[key]
                }
            }) 
        }
    })
})()

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */

//发布跟修改是同一套表单，所以要判断按钮是发布还是保存修改
document.querySelector('.send').addEventListener('click',async e=>{
    if(e.target.innerHTML !== '修改') return
    //修改文章逻辑
    const form = document.querySelector('.art-form')
    const data = serialize(form, { hash: true, empty: true })
 
    console.log(data); //{id: '09b13350-044f-4879-9d2e-be66d5a10eb2', title: '12345612', channel_id: '1', content: '<p>bv bv &nbsp;</p>'}

    //5.2 调用编辑文章接口，保存信息到服务器
    try{
        const res = await axios({
        url:`/v1_0/mp/articles/${data.id}`,
        method:'PUT',
        //传json字符串
        data:{
            ...data,
            cover:{
                type:document.querySelector('.rounded').src ? 1 : 0,
                images:[document.querySelector('.rounded').src]
            }
        }

    })
    console.log(res);
    myAlert(true,'修改文章成功')
    } catch(error){
        myAlert(false,error.response.data.message)
    }
    
    
    
})